<template>
	<div class="book-setting">
		<div class="title">
			<el-icon>
				<ArrowLeftBold />
			</el-icon>
			<h2>作品设定</h2>
			<div class="seat"></div>
		</div>
		<div class="content">
			<section>
				<div class="image fengmian-box">
					<img class="fengmian-box" src="../assets/images/mywork.webp" alt="" />
				</div>
				<div class="btn">
					<el-button round plain size="large" :icon="EditPen" color="#fa715d">上传封面</el-button>
				</div>
				<div class="tips">
					<h4>封面上传须知</h4>
					<p>格式 JPG / PNG 长宽比 7:10 ，例如 700 x 1000 像素</p>
					<p>注意 : 上传封面请使用原创或已取得授权的图片</p>
				</div>
			</section>
			<div class="edit-list">
				<div class="item">
					<div class="tit tit-1">
						<div>
						<h4>作品类型<span>*</span></h4>
						</div>
						<div class="xiaoshuo-box">小说</div>
					</div>
				</div>

				<div class="item">
					<div class="tit">
						<h4>一句话作品简介<span>*</span></h4>
						<el-link :icon="EditPen" @click="jianjieEdit()">编辑</el-link>
					</div>
					<div class="inner">请输入一句话简介</div>
				</div>

				<div class="item">
					<div class="tit">
						<h4>作品简介<span>*</span></h4>
						<el-link :icon="EditPen" @click="jianjieEdit()">编辑</el-link>
					</div>
					<div class="inner">还沒有作品介绍?请新增作品简介</div>
				</div>
				<div class="item">
					<div class="tit">
						<h4>作品类别<span>*</span></h4>
						<el-link :icon="EditPen" @click="jianjieType()">编辑</el-link>
					</div>
					<div class="inner">恋爱言情</div>
				</div>
				<div class="item">
					<div class="tit">
						<h4>作品标签<span>*</span></h4>
						<el-link :icon="EditPen" @click="tagShow = true">编辑</el-link>
					</div>
					<div class="inner">女强、男性向</div>
				</div>
				<div class="item">
					<div class="tit">
						<h4>是否含有成人向内容？</h4>
					</div>
					<div class="inner">
						<el-radio-group v-model="radio">
							<el-radio :value="3">是</el-radio>
							<el-radio :value="6">否</el-radio>
						</el-radio-group>
					</div>
				</div>

				<div class="item">
					<div class="tit">
						<h4>连载状态</h4>
					</div>
					<div class="inner">
						<el-radio-group v-model="radio">
							<el-radio :value="3">连载中</el-radio>
							<el-radio :value="6">已完结</el-radio>
						</el-radio-group>
					</div>
				</div>

				<div class="item status">
					<div class="tit">
						<h4>作品篇幅</h4>
					</div>
					<div class="inner">
						<el-radio-group v-model="radio">
							<el-radio :value="3">短篇</el-radio>
							<el-radio :value="6">中篇</el-radio>
							<el-radio :value="6">长篇</el-radio>
							<el-radio :value="6">大长篇</el-radio>
						</el-radio-group>

					</div>
				</div>

				<div class="item status">
					<div class="tit">
						<h4>发布状态</h4>
					</div>
					<div class="inner">
						<el-radio-group v-model="radio">
							<el-radio :value="3">未发布</el-radio>
							<el-radio :value="6">立即发布</el-radio>
							<el-radio :value="6">定时发布</el-radio>
						</el-radio-group>
						<el-date-picker v-model="dateTimeValue" type="datetime" placeholder="请选择发布日期" />

						<el-radio-group v-model="radio" class="top10">
							<el-radio :value="3">已下架</el-radio>
						</el-radio-group>
						
					</div>
				</div>

				
				<!-- <div class="item-bottom">
					<el-collapse accordion>
						<el-collapse-item name="1">
							<template #title="{ isActive }">
								<div :class="['title-wrapper', { 'is-active': isActive }]">
									更多作品设定
									<el-icon class="header-icon">
										<info-filled />
									</el-icon>
								</div>
							</template>
							<div class="item">
								<div class="tit">
									<h4>封面繪師<span>*</span></h4>
									<el-link :icon="EditPen">编辑</el-link>
								</div>
								<div class="inner">請填寫封面繪師名称</div>
							</div>
							<div class="item">
								<div class="tit">
									<h4>作品简介<span>*</span></h4>
									<el-link :icon="EditPen">编辑</el-link>
								</div>
								<div class="inner">还没有作品介紹？请新增作品简介</div>
							</div>
						</el-collapse-item>
					</el-collapse>
				</div> -->
			</div>
		</div>

		<el-dialog ref="editDialog" v-model="dialogFormVisible" title="编辑作品名称" center>
			<el-input v-model="workName" type="text" autocomplete="off" placeholder="请输入作品名称" maxlength="65"
				show-word-limit />
			<template #footer>
				<div class="dialog-footer">
					<el-button round type="primary" @click="dialogFormVisible = false">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>

		<el-dialog ref="editDialog" v-model="editJianjieShow" title="编辑作品简介" center>
			<el-input v-model="workName" autocomplete="off" placeholder="请输入作品简介" maxlength="65" show-word-limit
				type="textarea" :rows="4" />
			<template #footer>
				<div class="dialog-footer">
					<el-button round type="primary" @click="dialogFormVisible = false">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>

		<el-dialog ref="editDialog" v-model="editTypeShow" title="编辑作品简介" center>
			<el-checkbox v-for="(item, index) in typeBosList"  :key="index">{{item.text}}</el-checkbox>
			<template #footer>
				<div class="dialog-footer">
					<el-button round type="primary" @click="editTypeShow = false">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>

		<el-drawer v-model="tagShow" direction="btt" :with-header="false" :show-close="true">
			<div class="title-color-size">
				编辑作品标签
			</div>

			<div class="top10">
				<el-input placeholder="请输入标签、Tag、关键字，並按Enter新增"></el-input>
			</div>

			<div class="top10 title-color-size">
				0 / 26
			</div>

			<div class="top20 title-color-size">
				相关标签：
			</div>

			<div>
				<div class="tag-box" v-for="(item, index) in 4" :key="index">标签 {{ index }}</div>
			</div>

		</el-drawer>
	</div>
</template>

<script setup>
import {
	ArrowLeftBold,
	Setting,
	EditPen,
	ArrowDown,
	Sort,
	MoreFilled,
	View,
	Tickets,
} from "@element-plus/icons-vue";
import { reactive, ref } from "vue";

const editDialog = ref(null);
const dialogFormVisible = ref(false);
const workName = ref("");
const dateTimeValue = ref();
const value2 = ref("");
const radio = ref(3);
const editJianjieShow = ref(false);
const editTypeShow = ref(false);
const tagShow = ref(false)

const jianjieEdit = () => {
	editJianjieShow.value = true;
}

const jianjieType = () => {
	editTypeShow.value = true;
}

const typeBosList = ref([
	{
		text: "日常温馨",
		src: '',
		href: '/search'
	},
	{
		text: "西幻",
		src: '',
		href: '/search'
	},
	{
		text: "奇幻",
		src: '',
		href: '/search'
	},
	{
		text: "未来科幻",
		src: '',
		href: '/search'
	},
	{
		text: "重生穿越",
		src: '',
		href: '/search'
	},
	{
		text: "玄幻仙侠武侠",
		src: '',
		href: '/search'
	},
	{
		text: "犯罪悬疑推理",
		src: '',
		href: '/search'
	},
	{
		text: "恐怖惊悚灵异",
		src: '',
		href: '/search'
	},
	{
		text: "青春校园",
		src: '',
		href: '/search'
	},
	{
		text: "现代社会",
		src: '',
		href: '/search'
	},
	{
		text: "古代历史",
		src: '',
		href: '/search'
	},
	{
		text: "近代民国",
		src: '',
		href: '/search'
	},
	{
		text: "其他架空世界观",
		src: '',
		href: '/search'
	},
])
</script>

<style lang="scss" scoped>
.title-color-size {
	font-size: 0.8rem;
	color: #2d3748;
}

.tag-box {
	border: 1px #fa715d solid;
	color: #fa715d;
	display: inline-flex;
	margin-left: 1rem;
	padding: 0.2rem;
	border-radius: 0.3rem;
	margin-top: 1rem;
}

.tag-box:nth-of-type(1) {
	margin-left: 0;
}

.book-setting {
	background: #ffffff;

	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 1rem;
		padding-right: 1rem;
		gap: 0.5rem;
		height: 4rem;
		background: #fff;

		:deep(.el-icon) {
			width: 3rem;
		}

		.seat {
			width: 3rem;
			height: 100%;
			flex: 0 0 auto;
		}
	}

	.content {
		margin: 0 auto;
		width: 100%;
		max-width: 32rem;
		padding-left: 1rem;
		padding-right: 1rem;
		padding-bottom: 4rem;

		section {
			display: flex;
			flex-direction: column;
			gap: 1rem;
			margin-bottom: 1rem;

			.image {
				position: relative;
				aspect-ratio: 7 / 10;
				width: 12rem;
				margin: 0 auto;
				clip-path: inset(0px round 0.25rem);

				img {
					display: block;
					width: 100%;
					object-fit: cover;
				}
			}

			.btn {
				display: flex;
				justify-content: center;
			}

			.tips {
				padding-left: 1rem;
				padding-right: 1rem;

				h4 {
					font-size: 0.875rem;
					font-weight: 400;
					line-height: 2;
					letter-spacing: 0.05em;
					color: #2d3748;
					margin-bottom: 1rem;
				}

				p {
					font-size: 0.75rem;
					font-weight: 400;
					line-height: 1.625;
					letter-spacing: 0.05em;
					color: #718096;
				}
			}
		}

		.edit-list {
			.item {
				.tit {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 4rem;

					:deep(.el-link) {
						display: flex;
						gap: 0.5rem;
						color: #fa715d;

						&:hover {
							&::after {
								display: none;
							}
						}
					}

					span {
						color: #fa715d;
					}
				}

				.tit-1{
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					margin-top: 0.2rem;
				}

				.inner {
					font-size: 0.875rem;
					font-weight: 400;
					line-height: 2;
					letter-spacing: 0.05em;
					color: #718096;
				}
			}

			.item-bottom {
				margin-top: 2rem;
			}

			.status {
				:deep(.el-radio-group) {
					display: flex;
					flex-direction: column;
					align-items: baseline;
					margin-bottom: 1rem;
				}

				:deep(.el-input) {
					width: 100%;
					padding: 6px;
					height: 3.5rem;
					background-color: #f7fafc;
					border: none;

					.el-input__wrapper {
						border: none;
						box-shadow: none;
					}
				}
			}

			:deep(.el-collapse-item__header) {
				justify-content: center;
				height: 4rem;
				border-top: 1px solid #a0aec0;
				border-bottom: none;

				span {
					flex: none;
				}
			}
		}
	}
}

:deep(.el-dialog) {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding-top: 0;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: 1rem;
	width: 93%;
	max-width: 30rem;
	border-radius: 0.5rem;
	background-color: var(--theme-ui-colors-background);

	.el-dialog__header {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 4rem;
		padding: 0;
	}

	.el-input__wrapper {
		display: flex;
		width: 100%;
		min-height: 3.5rem;
		background-color: var(--theme-ui-colors-gray-1);
		-webkit-box-align: center;
		align-items: center;
		border-color: var(--theme-ui-colors-gray-1);
		border-width: 0.0625rem;
		border-style: solid;
		border-radius: 0.25rem;
		overflow: hidden;
		box-shadow: none;

		&.is-focus {
			box-shadow: 0 0 0 1px var(--theme-ui-colors-primary) inset;
		}

		input {
			padding: 1rem;
			flex: 1 1 0px;
			font-size: 0.875rem;
			font-weight: 400;
			line-height: 2;
			letter-spacing: 0.05em;
			color: var(--theme-ui-colors-gray-8);
			resize: vertical;
		}
	}

	.form-item {
		margin-bottom: 1rem;

		label {
			display: block;
			font-size: 0.875rem;
			font-weight: 500;
			line-height: 1.5;
			letter-spacing: 0.05em;
			color: #1a202c;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			margin-bottom: 1rem;
		}

		.el-select {
			width: 100% !important;
		}
	}
}

:deep(.el-dialog__footer) {
	.dialog-footer {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	button {
		text-align: center;
		padding: 0.5rem 1rem;
		border: 0px;
		font-size: 0.875rem;
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: 0.05em;
		color: white;
		background-color: var(--theme-ui-colors-primary);
		height: 3rem;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.5rem;
		user-select: none;
		transition: background-color 0.3s ease-out;
		width: 100%;
		max-width: 16rem;
		border-radius: 50rem;
	}
}

.fengmian-box,
.fengmian-boss {
	width: 127px !important;
	height: 182px !important;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.xiaoshuo-box {
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 2;
	letter-spacing: 0.05em;
	color: #718096;
	margin-top: 1rem;
}
</style>